<template>
  <div class="lll">
    <div class="lkj">
      <!-- <img src="../../assets/1.png" class="img" alt="" /><img
        src="../../assets/2.png"
        alt=""
        class="image"
      /><input type="text" placeholder="请输入症状/疾病" class="input" @click="sou" /><img
        src="../../assets/3.png"
        alt=""
        class="tu"
      /> -->

      <div>
        <img style="border-radius: 50%" :src="headpic" @click="login" class="img" alt="" /><img
          src="../../assets/2.png"
          alt=""
          class="image"
        /><input type="text" placeholder="请输入症状/疾病" class="input" @click="sou" /><img
          src="../../assets/3.png"
          @click="message"
          alt=""
          class="tu"
        />
      </div>
      <div class="box">
        <div>
          <van-swipe class="my-swipe" :autoplay="2000" indicator-color="black">
            <van-swipe-item
              ><img src="http://10.59.9.18/images/health/banner/banner-1.jpg" alt="" class="kun"
            /></van-swipe-item>
            <van-swipe-item
              ><img src="http://10.59.9.18/images/health/banner/banner-3.jpg" alt="" class="mn"
            /></van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <div class="wen">
        <div class="zhi">知识宝典</div>
      </div>
      <div class="kh">
        <div class="kk" @click="lo">
          <div class="chang">常见病症</div>
          <div>
            <img src="../../assets/6.png" alt="" class="jj" />
          </div>
        </div>
        <div class="kk1" @click="lo">
          <div class="chang">常用药品</div>
          <div>
            <img src="../../assets/7.png" alt="" class="jj" />
          </div>
        </div>
      </div>
      <div class="zhen">
        <div>
          <div class="zi">问诊咨询</div>
        </div>
      </div>
      <div class="jun">
        <div v-for="(item, index) in list" :key="item.id" @click="ji(item.id)">
          <div class="jun2">
            <div>
              <img v-lazy="item.pic" alt="" class="lok" />
            </div>
            <div class="khj">{{ item.departmentName }}</div>
          </div>
        </div>
      </div>
      <div class="jian">
        <div class="kang">健康评测</div>
      </div>
      <div class="jjj">
        <div>
          <img src="../../assets/88.png" alt="" class="hh" />
        </div>
      </div>
      <div class="jian1">
        <div class="kang">健康资讯</div>
      </div>
      <div class="tab">
        <div v-for="(item, index) in datalist" :key="item.id">
          <div class="tab1" @click="dian(item)" :class="{ hhh: active === item.id }">
            {{ item.name }}
          </div>
        </div>
      </div>
      <VirtualList :items="items" :itemHeight="80" :itemComponent="ItemComponent">
        <div class="kjh">
          <div @click="cha" class="kan">查看更多</div>
          <div class="hjk" @scroll="handleScroll">
            <div v-for="(item, ind) in kunlist" :key="ind" class="tablist" @click="Detail(item.id)">
              <dl>
                <dt>
                  <div class="huii">
                    <img :src="item.thumbnail" alt="" class="gg" />
                  </div>
                </dt>
                <div class="wz">{{ item.title }}</div>
              </dl>
            </div>
          </div>
          <div v-if="isLoading" class="loading-tip">正在加载更多...</div>
        </div>
      </VirtualList>
    </div>
  </div>
</template>

<script setup>
import router from '@/router'
import axios from 'axios'
import { id } from 'element-plus/es/locales.mjs'
import path from 'path'
import { onMounted, ref, onUnmounted } from 'vue'
import VirtualList from '../../components/VirtualList.vue'

const items = Array.from({ length: 100 })

const ItemComponent = {
  template: '<div class="custom-item"><slot></slot></div>',
}
const logindata = ref(JSON.parse(localStorage.getItem('result') || '{}'))
const active = ref(1)
const datalist = ref([])
const list = ref([])
const kunlist = ref([])
const cha = () => {
  router.push('/syxq')
}
const sou = () => {
  router.push('/sou')
}
const lo = () => {
  router.push('/zhi')
}
const ji = (id) => {
  router.push({ name: 'yis' })
}
const dian = (item, index) => {
  active.value = item.id
  page.value = 1 // 重置页数
  kunlist.value = [] // 清空数据
  getlist2(active.value)
}
const page = ref(1)
const isLoading = ref(false)
const getlist = async () => {
  await axios.get('/health/share/information/v1/findInformationPlateList').then((res) => {
    datalist.value = res.data.result
    // console.log(res)
  })
}
getlist()
const getlist1 = async () => {
  await axios.get('/health/share/knowledgeBase/v1/findDepartment').then((res) => {
    list.value = res.data.result
    console.log(res)
  })
  // console.log(res)
}
getlist1()

const getlist2 = async () => {
  if (isLoading.value) return
  isLoading.value = true
  await axios
    .get('/health/share/information/v1/findInformationList', {
      params: {
        plateId: active.value,
        page: page.value,
        count: 5,
      },
    })
    .then((res) => {
      // console.log(res)
      const newData = res.data.result
      // console.log(newData)
      if (newData && newData.length > 0) {
        kunlist.value.push(...newData)
        page.value += 1
      } else {
        console.log('没有更多数据了')
      }
    })
    .finally(() => {
      isLoading.value = false
    })
}

const handleScroll = () => {
  setTimeout(() => {
    const scrollHeight = document.documentElement.scrollHeight
    const scrollTop = document.documentElement.scrollTop
    const clientHeight = document.documentElement.clientHeight
    if (scrollTop + clientHeight >= scrollHeight - 80) {
      getlist2()
    }
  }, 1000)
}

onMounted(() => {
  getlist2(active.value)
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

const message = () => {
  router.push('/my_message')
}

const login = () => {
  router.push('/my')
}
const Detail = (id, item) => {
  router.push({
    name: 'shoudetail',
    params: {
      id: id,
      item: item,
    },
  })
  let oldUsersJSON = localStorage.getItem('sc')
  let newUser = kunlist.value[id]
  let users = []
  if (oldUsersJSON) {
    // 解析JSON字符串为对象数组
    users = JSON.parse(oldUsersJSON)
  }
  // 添加新用户对象
  users.unshift(newUser)
  // 将更新后的对象数组转换为JSON字符串并存储
  localStorage.setItem('sc  ', JSON.stringify(users))
}
const headpic = localStorage.getItem('headpic')
</script>

<style scoped lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.custom-item {
  // line-height: 80px; /* 与 itemHeight 相同 */
  padding: 0 10px;
}

.kan {
  margin-left: 10px;
}

html {
  overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
  width: 100vw;
  overflow: hidden;
}
.loading-tip {
  text-align: center;
  font-size: 10px; // 20px * 0.5 = 10px
  margin-top: 5px; // 10px * 0.5 = 5px
  color: #888;
}

.tablist {
  width: 100%;
  height: 85px; // 170px * 0.5 = 85px
}

.wz {
  font-size: 14px; // 28px * 0.5 = 14px
  margin-top: 5px; // 10px * 0.5 = 5px
  width: 250px; // 500px * 0.5 = 250px
  margin-left: 16.5px; // 33px * 0.5 = 16.5px
}

.huii {
  width: 115px; // 230px * 0.5 = 115px
  height: 80px; // 160px * 0.5 = 80px
  margin: 0 auto;
  margin-top: 5px; // 10px * 0.5 = 5px

  img {
    width: 100%;
    height: 100%;
    margin-left: 9px; // 18px * 0.5 = 9px
  }
}

dl {
  display: flex;
  margin-top: 2.5px; // 5px * 0.5 = 2.5px
}

.kjh {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.hjk {
  width: 100%;
  height: 100%;
}

.hhh {
  color: blue;
}

.khj {
  display: block;
  width: 105px; // 210px * 0.5 = 105px
  height: 15%; // 30% * 0.5 = 15%，按比例调整高度占比
  text-align: center;
}

.lok {
  width: 65px; // 130px * 0.5 = 65px
  height: 65px; // 130px * 0.5 = 65px
  margin-left: 20px; // 40px * 0.5 = 20px
}

.jun2 {
  width: 90px; // 180px * 0.5 = 90px
  height: 100px; // 200px * 0.5 = 100px
  margin-top: 5px; // 10px * 0.5 = 5px
}

.lkj {
  width: 100%;
  height: 25px; // 50px * 0.5 = 25px
}

.tab1 {
  font-size: 14px; // 28px * 0.5 = 14px
  margin-left: 15px; // 30px * 0.5 = 15px
}

.ghj {
  width: 70px; // 140px * 0.5 = 70px
  height: 70px; // 140px * 0.5 = 70px
}

.mn {
  width: 100%;
  height: 147.5px; // 295px * 0.5 = 147.5px
}

.lll {
  width: 100%;
  height: 1160px; // 2900px * 0.5 = 1450px
}

.tab {
  width: 100%;
  height: 45px; // 90px * 0.5 = 45px
  border: 1px solid #ccc;
  display: flex;
  line-height: 45px; // 与高度对应调整
}

.jjj {
  width: 100%;
  height: 170px; // 340px * 0.5 = 170px
  // border: 1px solid #ccc;
  margin-top: 1.5px; // 3px * 0.5 = 1.5px
}

.hh {
  width: 100%;
}

.jian1 {
  width: 100%;
  height: 30px; // 60px * 0.5 = 30px
  border: 1px solid #ccc;
  margin-top: 2.5px; // 5px * 0.5 = 2.5px
}

.jian {
  width: 100%;
  height: 30px; // 60px * 0.5 = 30px
  border: 1px solid #ccc;
}

.kang {
  margin-left: 7.5px; // 15px * 0.5 = 7.5px
  margin-top: 7.5px; // 15px * 0.5 = 7.5px
}

.kun {
  width: 100%;
  height: 147.5px; // 295px * 0.5 = 147.5px
}

.jun {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 200px; // 400px * 0.5 = 200px
  border-top: 1px; // 2px * 0.5 = 1px
  margin-top: 1.5px; // 3px * 0.5 = 1.5px
  border-bottom: 0.5px; // 1px * 0.5 = 0.5px
}

.jun1 {
  width: 75px; // 150px * 0.5 = 75px
  height: 65px; // 130px * 0.5 = 65px
  margin-left: 16px; // 32px * 0.5 = 16px
  margin-top: 10px; // 20px * 0.5 = 10px
}

.nei {
  text-align: center;
}

.zhen {
  width: 100%;
  height: 30px; // 60px * 0.5 = 30px
  border-top: 0.5px; // 1px * 0.5 = 0.5px
  border-bottom: 0.5px; // 1px * 0.5 = 0.5px
  margin-top: 1.5px; // 3px * 0.5 = 1.5px
}

.zi {
  margin-left: 7.5px; // 15px * 0.5 = 7.5px
  margin-top: 7.5px; // 15px * 0.5 = 7.5px
}

.kun1 {
  width: 375px; // 750px * 0.5 = 375px
  height: 145px; // 290px * 0.5 = 145px
}

.kun2 {
  width: 100%;
  height: 75px; // 150px * 0.5 = 75px
}

.kun3 {
  width: 100%;
  height: 75px; // 150px * 0.5 = 75px
}

.kun4 {
  width: 100%;
  height: 75px; // 150px * 0.5 = 75px
}

.kun5 {
  width: 100%;
  height: 75px; // 150px * 0.5 = 75px
}

.kun6 {
  width: 100%;
  height: 75px; // 150px * 0.5 = 75px
}

.kun7 {
  width: 100%;
  height: 75px; // 150px * 0.5 = 75px
}

.kh {
  display: flex;
}

.kk {
  width: 50%;
  height: 200px; // 400px * 0.5 = 200px
  border: 1px solid #ccc;
  z-index: 9999;
  margin-top: 1.5px; // 3px * 0.5 = 1.5px
}

.kk1 {
  width: 50%;
  height: 200px; // 400px * 0.5 = 200px
  border: 1px solid #ccc;
  z-index: 9999;
  margin-top: 1.5px; // 3px * 0.5 = 1.5px
  margin-left: 2.5px; // 5px * 0.5 = 2.5px
}

.kun1 {
  width: 100%;
  height: 65px; // 130px * 0.5 = 65px
  margin-top: 24px; // 48px * 0.5 = 24px
}

.wen {
  width: 100%;
  height: 25px; // 50px * 0.5 = 25px
  border-bottom: 1px; // 2px * 0.5 = 1px
}

.zhi {
  margin-left: 7.5px; // 15px * 0.5 = 7.5px
  margin-top: 7.5px; // 15px * 0.5 = 7.5px
}

.chang {
  margin-left: 7.5px; // 15px * 0.5 = 7.5px
  margin-top: 4px; // 8px * 0.5 = 4px
}

.box {
  width: 100%;
  height: 150px; // 300px * 0.5 = 150px
  border-bottom: 1px; // 2px * 0.5 = 1px
  margin-top: 40px; // 80px * 0.5 = 40px
}

.img {
  width: 25px; // 50px * 0.5 = 25px
  height: 25px; // 50px * 0.5 = 25px
  position: absolute;
  left: 5px; // 10px * 0.5 = 5px
  top: 7.5px; // 15px * 0.5 = 7.5px
}

.jj {
  width: 96%;
  height: 180px; // 360px * 0.5 = 180px
}

.tu {
  width: 20px; // 30px * 0.5 = 15px
  height: 20px; // 40px * 0.5 = 20px
  position: absolute;
  right: 10px; // 93% * 0.5 = 91.5%，按比例调整位置
  top: 11.5px; // 23px * 0.5 = 11.5px
  z-index: 99999;
}

.image {
  width: 12.5px; // 25px * 0.5 = 12.5px
  height: 12.5px; // 25px * 0.5 = 12.5px
  position: absolute;
  left: 50px; // 100px * 0.5 = 50px
  top: 15px; // 30px * 0.5 = 15px
  z-index: 99999;
  background: #fff;
}

.input {
  width: 80%;
  height: 22.5px; // 45px * 0.5 = 22.5px
  position: absolute;
  // z-index: 9999;
  left: 37.5px; // 75px * 0.5 = 37.5px
  top: 9px; // 18px * 0.5 = 9px
  border-radius: 50rem;
  border: 1px solid #ccc;
  text-align: center;
}
</style>
